<template>
	<div class="tmpl">
		<ul>
			<li v-for="(item,index) in list" class="li1">			
				<mt-switch class="leftc" v-model="values[index]"></mt-switch>
				<img class="centerc" width="75" height="75" :src="item.thumb_path" alt="">
				<div class="rightc">
					<h5>{{item.title}}</h5>
					<ul>
						<li class="red">￥{{item.sell_price}}</li>
						<li>
							<div class="num">
								<div class="left" @click="subtract(item)">-</div>
								<div class="center">{{item.count}}</div>
								<div class="right"  @click="add(item)">+</div>
							</div>
						</li>
						<li>
							<a @click="del(index,item.goodsid)">删除</a>
						</li>
					</ul>

				</div>
			</li>			
		</ul>

		<div class="sett">
			<div>
				<p>总计:</p>
				<span>已经选择商品 {{count}} 件，总价 ¥{{settement}} 元</span>
			</div>
			<mt-button class="bt" type="danger" size="normal">结算</mt-button>
		</div>
	</div>
</template>
<script>
import {getJsonObject,removeGoods,setItem,subtractItem,getTotalCount} from '../../kits/shopcar.js';

import {vm,KEY} from '../../kits/sendparams.js'


	export default{
		data(){
			return {
				values:[],
				count:0, //存储的是选中商品的总数量
				list:[]  
			}
		},
		computed:{
			// 负责统计选中商品的总数量和计算选中商品的总价格
			settement(){
				// 统计选中商品的总数量
				var truearr = this.values.filter(function(val){return val;});

				this.count = truearr.length;

				// 计算选中商品的总数量
				var totalAmount=0;
				this.values.forEach((item,index)=>{
					if(item){
						// 根据index索引去商品数据列表中获取商品对象
						var goodsobj = this.list[index];
						totalAmount+=(goodsobj.sell_price * goodsobj.count);
					}
				});

				return totalAmount;
			}
		},
		methods:{
			del(index,goodsid){
				// 根据索引的值删除 this.list和this.values数组中的值即可
				this.list.splice(index,1);
				// 注意点：只要改变了values的值就会自动触发settement计算属性的执行，就会自动统计数量和总价格
				this.values.splice(index,1);
                // 删除loaclStorage中当前商品的所有对象
                removeGoods(goodsid);
                var TotalCount = getTotalCount();
                vm.$emit(KEY,TotalCount);
			},
			newval(countObj){
				// 将list数据中的这个商品的数量减一或者加一
				this.list.forEach(item=>{
					if(item.goodsid == countObj.goodsid){
						item.count = countObj.count;
					}
				});

				// 触发重新计算
				this.values.push(false);
				this.values.pop();
			},
            subtract(countObj){
			    if(countObj.count>1){
                    countObj.count--;
                    subtractItem(countObj.goodsid);
				}else{
                    countObj.count = 1;
				}
                this.newval(countObj);
                var TotalCount = getTotalCount();
                vm.$emit(KEY,TotalCount);
			},
			add(countObj){
                countObj.count++;
                setItem({goodsid:countObj.goodsid,count:1});
                this.newval(countObj);
                var TotalCount = getTotalCount();
                vm.$emit(KEY,TotalCount);
			},
			getlist(){
                this.list = getJsonObject();

						// 初始化values的数据个数

				for(var i=0; i<this.list.length; i++){
						this.values.push(false);
                }

			}
		},
		created(){
			this.getlist();
		},
		components:{

		}
	}
</script>

<style scoped>

.sett{
	height: 130px;
	padding: 20px 5px;
	background-color: rgba(0,0,0,0.1);
	display: flex;
}
.sett p{
	flex:0 200px;
}
.sett span{
	flex:1;	
}
.sett .bt{
	position: absolute;;
	right: 5px;
}
.carnum.tmpl{
	margin: 0;
}
.tmpl ul{
	padding: 0px;
}
.tmpl li{
	list-style: none;
}

.red{
	color:red;
	font-size:16px;
}
.li1{
	display: flex;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	padding: 8px 0 7px 0;
}
.li1 .leftc{
	flex:0 52px;
	margin-left: 5px;
}
.li1 .centerc{
	flex:0 75px;
	margin: 0 10px;
}
.li1 .rightc{
	flex:1;
}
.li1 h5{
	font-size:16px;
	color: #000000;
	font-weight: 700;
}
.rightc ul{
	margin-top: 20px;
}
.rightc li{
	display: inline-block;
}


.left,.center,.right{
	width: 30px;
	height: 30px;
	border:1px solid #ffff00;
	text-align: center;
	line-height: 30px;
}

.num{
	width: 100px;
	display: flex;
}

.left{
	flex:0 30px;
}
.center{
	flex:0 40px;
}
.right{
	flex:1;
}


</style>